<template>
<div class="about">
  <h2>x: {{x}}, y: {{y}}</h2>
  <hr>

  <h3 v-if="loading">正在加载中...</h3>
  <h3 v-else-if="errorMsg">{{errorMsg}}</h3>
  <!-- <img v-else :src="result?.message" alt="dog"> -->
  <img v-else-if="result" :src="result[0].url" alt="dog">

  <!-- 可选链:  -->
</div>
</template>

<script lang="ts" setup>
import useClickPosition from '@/hooks/useClickPosition'  
import useRequest from '@/hooks/useRequest'  

interface Dog {
  message: string;
  status: string;
}

interface Cat {
  id: string;
  url: string;
}


const {x, y} = useClickPosition()
// const url = 'https://dog.ceo/api/breeds/image/random'
// const {loading, result, errorMsg} = useRequest<Dog>(url)
const url = 'https://api.thecatapi.com/v1/images/search'
const {loading, result, errorMsg} = useRequest<Cat[]>(url)
</script>
